@import '../../../app/mixins.css';

.selector {
  align-self: flex-start;
  border: 1px solid var(--color-platinum);
  border-radius: var(--border-radius-standard);
  display: flex;
  height: 45px;
  margin: 0;
  overflow: hidden;
  padding: 0;

  & > label {
    border-left: 1px solid var(--color-platinum);
    cursor: pointer;

    &:first-child {
      border-left: 0 none;
    }

    & > span {
      @mixin contentSmall bold;

      align-items: center;
      background: var(--color-white-smoke);
      color: var(--color-slate-gray);
      display: flex;
      flex-grow: 1;
      height: 100%;
      padding: 0px 30px;
      transition:
        background-color var(--animation-speed-fast) linear,
        color var(--animation-speed-fast) linear;
    }
  }

  & input {
    display: none;

    &:checked + span {
      background-color: var(--color-white);
      color: var(--color-ultramarine-blue);
    }
  }
}
